<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用类的注意事项</title>
</head>

<body>
  <button>按钮</button>
  <script>
    // 注意点1：ES6中没有变量提升 所以必须先定义类，才能通过类实例化对象.
    // var zsf = new Star('张三丰', 100)  //会报错
    var that;
    class Star {
      constructor(uname, age) {
        that = this;
        this.uname = uname;
        this.age = age;
        //注意点2： 类里面的共有属性和方法一定要加this使用.【this.属性 this.方法】
        this.say();// 对象.属性，对象.方法()！！！！！
        this.btn = document.querySelector('button');
        // this.btn.onclick = this.say;  //不能加()否则就直接执行了，我们需要先点击再执行

        //注意点3： constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
        // 这里的this指向btn btn中没有uname属性 所以输出undefined
        // this.btn.onclick = this.dance;  //underfind

        this.btn.onclick = this.sing; //刘德华
      }
      say() {
        console.log(111);
      }
      dance() {
        console.log(this.uname);
      }
      sing() {
        console.log(that.uname);
      }
    }
    var ldh = new Star('刘德华', 18);
  </script>
</body>

</html>